<template>
    <div class="register">
        <el-dialog
                :center="true"
                :show-close="false"
                :close-on-press-escape="false"
                :close-on-click-modal="false"
                :visible="true"
                custom-class="customClass"
                class="customClass"
                width="400px"
        >
            <div slot="title">
                <h2>校园借用系统管理</h2>
            </div>

            <div class="content">
                <el-form>
                    <el-form-item class="marginBottom">
                        <el-input clearable placeholder="手机号" v-model="user.phone"></el-input>
                    </el-form-item>
                    <el-form-item class="marginBottom">
                        <el-input clearable placeholder="用户名" v-model="user.userName"></el-input>
                    </el-form-item>
                    <el-form-item class="marginBottom">
                        <el-input clearable placeholder="邮箱" v-model="user.email"></el-input>
                    </el-form-item>
                    <el-form-item class="marginBottom">
                        <el-select v-model="user.userType" placeholder="用户类型">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="marginBottom">
                        <el-input clearable placeholder="请输入密码" v-model="user.passWord" show-password></el-input>
                    </el-form-item>
                    <el-form-item class="marginBottom">
                        <el-button style="width: 100%" @click="register" type="primary">注册</el-button>
                        <el-link style="width: 100%" @click="go" type="primary">已有账号？去登陆</el-link>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  export default {
    name: "Register",
    data(){
      return {
        user : {
          phone : '',
          userName: '',
          email: '',
          userType : 0,
          passWord: '',
        },
        options: [
          {name : '学生' , value : 0},
          {name : '教室' , value : 1},
          {name : '校内工作人员' , value : 2},
          {name : '管理员' , value : 3},
        ]
      }
    },
    methods: {
      go(){
        this.$router.push("/login");
      },
      register(){
        this.$api.user.userRegister(this.user)
        .then(() => {
          // 这里到时候注册直接进行登陆、现在暂时告诉其成功然后转向登陆页
          this.$router.push("/login");
          this.$message({
            message: '注册成功',
            type: 'success',
          })
        })
        .catch((err) => {
          console.log(err.response)
          if (err.response.status === 400){
            this.$message({
              message: err.response.data.message,
              type: 'error',
            })
          }
          if (err.response.status === 500){
            this.$message({
              message: '该用户已存在',
              type: 'error'
            })
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
    .customClass{
        background: url("../assets/login_bg.jpg") no-repeat;
        background-size: cover;

        .img{
            width: 50px;
            height: 50px;
            margin: auto;
        }

    }
</style>
